<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>bootstrap表格</title>
</head>
<body>
    <!-- 为了让表格居中显示添加一个容器 -->
    <div class="container">
        <!-- table用于创建一个表格 -->
        <!-- .table类会给表格加上一些边距和下边框  -->
        <!-- .table-bordered给表格添加所有边框 -->
        <!-- .table-borderless去除表格所有的边框 -->
        <!-- .table-sm可以让表格内容的边距减半，使表格更紧凑 -->
        <!-- .table-responsive-* 可以让表格在指定断点产生相应，来适配更小的屏幕 -->
        <!-- .table-striped可以给表格添加间隔条纹 -->
        <!-- .table-hover让表格的行有鼠标经过时添加一个灰色背景作为相应 -->
    <table class="table  table-striped">
        <!-- thead用于创建表头 -->
        <thead>
            <!-- tr用于创建一行 -->
            <tr>
                <!-- th用于创建表头中的列，有字体加粗的效果 -->
                <th>ID</th>
                <th>名字</th>
                <th>城市</th>
                <th>邮箱</th>
            </tr>
        </thead>
        <!-- tbody创建表格主体 -->
        <tbody>
            <tr>
                <!-- td创建表格主体中的列 -->
                <td>1</td>
                <td>John</td>
                <td>上海</td>
                <td>john@qq.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Tom</td>
                <td>北京</td>
                <td>tom@qq.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Joe</td>
                <td>北海</td>
                <td>joe@qq.com</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Trout</td>
                <td>北海</td>
                <td>trout@qq.com</td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>